监听事件
监听事件
在 Vue3 中,我们可以使用v-on
指令或者简写为@
来监听 DOM 事件,例如点击事件、键盘事件等。
常用事件
@click
监听点击事件@keydown
监听键盘按下事件@change
监听表单元素的值变化事件@input
监听表单元素的输入事件@focus
监听表单元素的获得焦点事件@blur
监听表单元素的失去焦点事件@scroll
监听元素的滚动事件
以下是一个简单的例子:
<template>
<div>
<button @click="handleClick">点击我</button>
<input @keydown="handleKeyDown" />
<button @mousedown="handleMouseDown">按下我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log("按钮被点击了");
},
handleKeyDown(event) {
console.log("按键被按下了", event);
},
handleMouseDown() {
console.log("鼠标被按下了");
},
},
};
</script>
在这个例子中,我们监听了三个不同的事件:点击按钮、在输入框中按下键盘、按下鼠标。当这些事件发生时,我们会调用相应的方法。
事件用法
click 绑定一个方法
@click
可以直接绑定一个方法到元素的点击事件上。例如:
<template>
<button @click="handleClick">点击按钮</button>
</template>
<script setup>
const handleClick = () => {
console.log("按钮被点击了!");
};
</script>
在上述示例中,当按钮被点击时,会执行 handleClick
方法,并在控制台打印一条消息。
click 接收一个内联表达式
除了直接绑定方法,@click
还可以接收一个内联表达式或动态方法名。例如:
<template>
<button @click="count++">增加计数器</button>
<button @click="dynamicMethod">调用动态方法</button>
</template>
<script setup>
let count = ref(0);
const dynamicMethod = () => {
console.log("动态方法被调用了!");
};
</script>
在上面的示例中,第一个按钮会使计数器增加,而第二个按钮会调用 dynamicMethod
方法。
注意事项:当使用内联表达式时,确保表达式的结果是一个函数。否则,Vue 3 将会发出警告。
事件修饰符
Vue 3 提供了一些事件修饰符来改变事件的行为。以下是常用的事件修饰符:
.stop
:阻止事件冒泡。.prevent
:阻止默认行为。.self
:只有事件在该元素本身触发时才会调用处理函数,不会反弹到父元素。.capture
:使用事件捕获模式而不是冒泡模式处理事件。.once
:只触发一次事件处理函数。.passive
:表明事件处理函数不会调用preventDefault()
。
这些修饰符可以结合使用,例如:
<template>
<div @click.stop.prevent="handleClick">阻止冒泡和默认行为</div>
</template>
<script setup>
const handleClick = () => {
console.log("事件被触发了!");
};
</script>
在上面的示例中,点击 <div>
元素会阻止事件冒泡并阻止默认行为。
按键修饰符
Vue 3 还提供了按键修饰符,用于处理特定按键的事件。你可以使用硬编码的按键码或使用别名来表示按键。
硬编码的按键码示例:
<template>
<input @keydown.13="handleEnterKey" placeholder="按下 Enter 键" />
</template>
<script setup>
const handleEnterKey = () => {
console.log("按下 Enter 键!");
};
</script>
在上面的示例中,当用户按下 Enter 键时,会触发 handleEnterKey
方法。
别名的按键修饰符示例:
<template>
<input @keydown.enter="handleEnterKey" placeholder="按下 Enter 键" />
</template>
<script setup>
const handleEnterKey = () => {
console.log("按下 Enter 键!");
};
</script>
这里使用 @keydown.enter
来表示按下 Enter 键。
除了 Enter 键,Vue 3 还提供了一些常用按键的别名,例如:.tab
, .delete
, .esc
, .space
, .up
, .down
, .left
, .right
。
系统按键修饰符
如果你想处理系统按键(如 Ctrl、Alt、Shift、Meta),Vue 3 也提供了相应的修饰符。例如:
<template>
<input @keydown.ctrl="handleCtrlKey" placeholder="按下 Ctrl 键" />
</template>
<script setup>
const handleCtrlKey = () => {
console.log("按下 Ctrl 键!");
};
</script>
在上面的示例中,当用户按下 Ctrl 键时,会触发 handleCtrlKey
方法。
.exact
修饰符
使用 .exact
修饰符可以确保组合按键的精确匹配。例如,如果你想要按下 Ctrl + Alt + A 才触发事件,可以这样写:
<template>
<input
@keydown.ctrl.alt.exact="handleExactKey"
placeholder="按下 Ctrl + Alt + A"
/>
</template>
<script setup>
const handleExactKey = () => {
console.log("按下 Ctrl + Alt + A!");
};
</script>
这样只有在按下 Ctrl + Alt + A 的组合键时,才会触发 handleExactKey
方法。
鼠标按键修饰符
除了处理键盘事件,Vue 3 还提供了鼠标按键修饰符。以下是常用的鼠标按键修饰符:
.left
:左键.right
:右键.middle
:中键
例如:
<template>
<div @mousedown.left="handleLeftClick">点击左键</div>
</template>
<script setup>
const handleLeftClick = () => {
console.log("点击左键!");
};
</script>
在上面的示例中,当用户点击 <div>
元素的左键时,会触发 handleLeftClick
方法。
以上就是关于 Vue 3 事件处理的详细解释和示例代码。通过这些示例,你可以更好地理解 Vue 3 中的事件处理机制,并注意相应的用法和注意事项。